<template lang="pug">
.m-content
  .title 天翼云
  .main
    .searchs
      el-row
        el-col(:span="6")
          div.flex-block
            div.name  产品类型
            el-select.select( v-model="postConditions.productType" @change="filterConditions")
              el-option(v-for="item in productTypes" :key="item.value" :label="item.label" :value="item.value")
        el-col(:span="6")
          div.flex-block
            div.name 归属地市
            el-select.select( v-model="postConditions.areaCode" @change="filterConditions")
              el-option(v-for="item in areaCodes" :key="item.value" :label="item.label" :value="item.value")
        el-col(:span="6")
          div.flex-block
            div.name 动作类型
            el-select.select( v-model="postConditions.action" @change="filterConditions")
              el-option(v-for="item in actions" :key="item.value" :label="item.label" :value="item.value")
        el-col(:span="6")
          div.flex-block
            div.name 状态
            el-select.select.active( v-model="postConditions.state" @change="filterConditions" )
              el-option(v-for="item in states" :key="item.value" :label="item.label" :value="item.value")
      .searchTypeInput
        el-input( placeholder="bizid、请求/工单 ID 、成员/组合 接入号" prefix-icon="el-icon-search" v-model="searchTypeInput"  @keyup.enter.native="filterConditions" )
        //- el-button(type="primary"  @click="filterConditions")
        //-   i(class="iconfont icon-chaxun1")
        //-   | 查询
    .cloud-table()
      tr-table(:data="tableData" :columns="columnsData")
        template(slot-scope="scope")
          el-button(type="text" icon="iconfont icon-yuanshigongdan" @click="originOderFn(scope.row)") 原始工单
          el-button(v-if="scope.row.state == 10" :disabled="scope.row.hasResend !== 1" type="text" icon="iconfont icon-zhongfa" @click="_orderResend(scope.row)") 重发
    Pagination(:total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="query" )

  //- router-view
</template>
<script>

import { productTypes, areaCodes, actions, states } from '@/utils/config'
import { compose, columnLabel, isEmpty, formatAt, memoize, formatArr, getlabel, isArrLength, dutime } from '@/utils/index'
import { queryOrder, orderResend } from '@/api/order.js'
import Pagination from '@/components/Pagination'
const STATE_ZAITU = '在途'
const defaulConditions = {
  productType: 'ALL', // 产品类型
  areaCode: 'ALL', // 归属地市
  action: 'ALL', // 动作类型
  state: 'ALL', // 状态
  searchType: '', // 查询类型key
  searchWord: '' // 查询类型value
}

export default {
  components: {
    Pagination
  },
  data () {
    return {
      postConditions: Object.assign({}, defaulConditions),
      productTypes,
      areaCodes,
      actions,
      states,
      searchTypeInput: '',
      tableData: [],
      total: 0,
      columnsData: [
        {
          prop: 'requestId',
          label: '工单ID',
          formatter: () => ({ class: 'title' }),
          handleClick: this.orderDetail,
          hidden: true,
          fixed: true
        },
        { prop: 'platformId', label: '成员接入号' },
        { prop: 'bizid',
          label: 'bizid',
          formatter: (prop, row) => (
            compose(columnLabel, isEmpty)(row[prop])
          )
        },
        {
          prop: 'productType',
          label: '产品类型',
          formatter: this.formatterProductType
        },
        {
          prop: 'areaCode',
          label: '归属地',
          formatter: this.formatterCode
        },
        { prop: 'action', label: '动作类型', formatter: this.formatterAction },
        { prop: 'state', label: '状态', formatter: this.formatterState },
        { prop: 'returnCode', label: '退单码', formatter: () => (columnLabel('--')), unchecked: true },
        { prop: 'failMessage', label: '异常信息', formatter: this.formatterDefault, unchecked: true },
        { prop: 'opinion', label: '处理建议', formatter: () => (columnLabel('--')), unchecked: true },
        {
          prop: 'updateAt',
          label: '更新时间',
          formatter: this.formatterAt
        },
        { prop: 'createAt', label: '创建时间', formatter: this.formatterAt, unchecked: true },
        { prop: 'returnAt', label: '回单时间', formatter: this.formatterAt, unchecked: true },
        { prop: 'ossFailCode', label: '工单用时', formatter: this.orderUseTime, unchecked: true }
      ],
      listQuery: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      this.queryOrderList(this.listQuery, this.postConditions)
    },
    formatterDefault (prop, row) {
      let value = row[prop]
      return compose(columnLabel, isEmpty)(value)
    },
    formatterCode (prop, row) {
      this.codeObj = this.codeObj ||
        compose(columnLabel, memoize(getlabel.bind(null, areaCodes)))
      return this.codeObj(row[prop])
    },
    formatterAction (prop, row) {
      this.actionObj = this.actionObj ||
        compose(columnLabel, memoize(getlabel.bind(null, actions)))
      return this.actionObj(row[prop])
    },
    formatterState (prop, row) {
      let value = row[prop]
      const stateArr = [0, 10]
      let label = ''
      let className = null
      if (stateArr.indexOf(value) === -1) {
        label = STATE_ZAITU
      } else {
        label = states.filter(v => v.value === value + '')[0].label
      }

      if (value === 0) {
        className = 'success'
      } else if (value === 10) {
        className = 'fail'
      }
      return { class: className, label }
    },
    formatterAt (prop, row) {
      return compose(columnLabel, formatAt.bind(null, this.$moment), isEmpty)(row[prop])
    },
    formatterProductType (prop, row) {
      this.typeObj = this.typeObj ||
        compose(columnLabel, memoize(getlabel.bind(null, productTypes)))
      return this.typeObj(row[prop])
    },
    // 工单用时
    orderUseTime (prop, row) {
      let startTime = row.createAt
      let endTime = row.returnAt
      let label = dutime.call(this, startTime, endTime)
      return columnLabel(label)
    },
    filterConditions () {
      const value = this.searchTypeInput
      this.postConditions.searchType = 'ALL'
      this.postConditions.searchWord = value

      if (/^\d{12,}$/.test(value)) {
        this.postConditions.searchType = 'BIZID'
      }

      if (/^\d+_[A-Z]{3,4}\d+$/.test(value)) {
        this.postConditions.searchType = 'REQUEST_ID,ORDER_ID'
      }

      if (/^\d+[a-z]{3,4}\d+$/.test(value)) {
        this.postConditions.searchType = 'PLATFORM_ID,COMBINATION_TAG'
      }
      this.listQuery.pageNum = 1
      this.query()
    },
    _orderResend (row) {
      this.$Qconfirm('确定重发', '提示').then(() => {
        let id = row.id
        orderResend(this.$http, { id }).then(res => {
          let data = res.data
          if (/重发成功/.test(data.message)) {
            this.$message.success(data.message)
          } else {
            this.$message.error(data.message)
          }
          this.query()
        })
      })
    },

    originOderFn (row) {
      this.$router.push('/order/OrderMain/ctyun/OrderOrigin/' + row.originOrderSeq)
    },
    orderDetail (row) {
      let { id } = row
      this.$router.push('/order/OrderMain/ctyun/OrderDetail/' + id)
    },
    queryOrderList (params, data) {
      queryOrder(this.$http, params, data).then(res => {
        let data = res.data.data
        this.tableData = data.list
        this.total = data.total
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.m-content
  font-size 14px
  .main
    padding 15px 20px
    .searchs
      .searchTypeInput
        margin 15px  0
        line-height 1
        .el-input
          width 260px
    .cloud-table
      >>>
        th
          div
            line-height 20px
            font-size 14px
        td
          div
            font-size 12px
            .title
              color #1f60bd
              cursor pointer
            .success
              color #02ce89
            .fail
              color #fe9b00
        .el-table__fixed-right::before
        .el-table__fixed::before
          height 0
      .iconfont
        margin-right 2px
</style>
